<template>
	<view class="liquorCardInfo">
		<n-loading></n-loading>
		<image class="titleBg" src="https://lovebirdopen.com/static/img/cBj/liquorCardBj.png" style="width: 100%;height: 200rpx;position: absolute;top: 0;left:0;"></image>
		<!-- 提示 -->
		<view class="takeGoodsTips" v-show="takeGoodsAlert.alertShow">
			<view class="tipsContBox">
				<u-icon :name="takeGoodsAlert.alertIcon" :color="takeGoodsAlert.alertIconColor" size="48"></u-icon>
				<view class="tipsCont">
					<view class="tipsContTit">{{takeGoodsAlert.alertTit}}</view>
					<view class="tipsContInfo">{{takeGoodsAlert.alertContent}}</view>
				</view>
			</view>
		</view>
		<view v-if="cardInfo">
			<view class="orderStatesBox" v-if="cardInfo.ispickup==1">
				<view class="orderStates">
					<view class="">提货成功</view>
					<view class="orderStatesTips">您已成功提货{{cardInfo.liquor_cate.name}}{{cardInfo.liquor_cate.description}}</view>
				</view>
			</view>
			<!-- 卡片详情上 -->
			<view class="cardInfoTop">
				<view class="b-l-b"></view>
				<view class="b-r-b"></view>
				<!-- 内容 -->
				<view class="cardTit">{{cardInfo.liquor_cate.name}}{{cardInfo.liquor_cate.description}}</view>
				<view class="cardCont">
					<dh-image class="niccImg" :src="cardInfo.image==null?'https://lovebirdopen.com/static/img/cBj/dPicture.png':cardInfo.image"
					 errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
					<view class="cardInfo">
						<view class="liquorTit">
							<view class="liquorTitleft ellipsis">{{cardInfo.name}}</view>
							<text>￥{{cardInfo.price}}</text>
						</view>
						<view class="liquorSpecs">
							<view class="liquorSpecs">{{cardInfo.specs}}</view>
							<text>×{{cardInfo.num}}</text>
						</view>
						<view class="waresTj">
							<view class="waresIconBox">
								<image src="../../static/img/shoppingBag.svg"></image>
								<text>商品</text>
							</view>
							<view class="waresTjInfo ellipsis">{{cardInfo.name}}</view>
							<view class="waresTjUnit">,{{cardInfo.num}}瓶</view>
						</view>
					</view>
				</view>
			
			</view>
			<!-- 核销码 -->
			<view class="carrdInfoBottom">
				<view class="b-l-t"></view>
				<view class="b-r-t"></view>
				<!-- 内容 -->
				<view class="pickupCode">
					<!-- <image :src="cardInfo.pickup_code_img"></image> -->
					<img :src="cardInfo.pickup_code_img" />
					<view class="pickupNum" v-if="cardInfo.ispickup!=1 && cardInfo.num!=0 && cardInfo.online!=1 && cardInfo.refund!=1">取货号：{{cardInfo.pickup_code}}</view>
					<!-- 已提货 -->
					<view class="pickedUpMask" v-if="cardInfo.ispickup==1"></view>
					<image class="pickedUp" src="../../static/img/yth.svg" mode="" v-if="cardInfo.ispickup==1"></image>
					<!-- 已赠送 -->
					<view class="pickedUpMask" v-if="cardInfo.num==0"></view>
					<image class="pickedUp" src="../../static/img/yzs.svg" mode="" v-if="cardInfo.num==0"></image>
					<!-- 已转线上 -->
					<view class="pickedUpMask" v-if="cardInfo.online==1"></view>
					<image class="pickedUp" src="../../static/img/zxs.svg" mode="" v-if="cardInfo.online==1"></image>
					<!-- 已退卡 -->
					<view class="pickedUpMask" v-if="cardInfo.refund==1"></view>
					<image class="pickedUp" src="../../static/img/ytk.svg" mode="" v-if="cardInfo.refund==1"></image>
				</view>
			</view>
			<!-- 去后门店 -->
			<view class="useRule" v-if="cardInfo.ispickup==null && cardInfo.num!=0 && cardInfo.online!=1 && cardInfo.refund!=1 && storeList">
				<view class="useRuleTit">取货门店</view>
				<view class="seeDesirable" @tap="pickupStoreGo">
					<view class="left">
						<view class="tit">{{storeList.name}} <text>最近门店</text></view>
						<view class="tips">{{storeList.address}}</view>
					</view>
					<u-icon name="arrow-right" color="#999" size="20"></u-icon>
				</view>
				<view class="mapBox">
					<map style="width:100%;height:100%" :latitude="storeList.lat" :longitude="storeList.lon" :markers="curmarkers">
					</map>
				</view>
				<view class="distance" @tap="tomap">
					据您{{storeList.distance}}km<u-icon style="float: right;margin-top: 24rpx;" name="arrow-right" color="#999" size="20"></u-icon>
				</view>
			</view>
			<!-- 已取货 -->
			<view class="useRule" v-if="cardInfo.ispickup==1 && storeList">
				<view class="useRuleTit">取货门店</view>
				<view class="seeDesirable">
					<view class="left">
						<view class="tit">华南酒类专卖店</view>
						<view class="tips">四川省成都市双流区益州大道1999号剑</view>
					</view>
					<u-icon name="arrow-right" color="#999" size="20"></u-icon>
				</view>
				<view class="mapBox">
					<map style="width:100%;height:100%" :latitude="storeList.lat" :longitude="storeList.lon" :markers="curmarkers">
					</map>
				</view>
				<view class="distance" @tap="tomap">
					据您{{storeList.distance}}km<u-icon style="float: right;margin-top: 24rpx;" name="arrow-right" color="#999" size="20"></u-icon>
				</view>
			</view>
			<!-- 订单详情 -->
			<view class="orderDetails">
				<view class="detailsEach">商品总价<text>￥{{cardInfo.order.order_amount}}</text></view>
				<view class="detailsEach">优惠金额<text class="orange">-￥{{cardInfo.order.coupon_pmt==null?'0.00':cardInfo.order.coupon_pmt}}</text></view>
				<view class="detailsEach">金币抵扣<text class="orange">-￥{{cardInfo.order.point_money==null?'0.00':cardInfo.order.point_money}}</text></view>
				<view class="detailsEach">高粱穗抵扣<text class="orange">-￥{{cardInfo.order.coin_money==null?'0.00':cardInfo.order.coin_money}}</text></view>
				<view class="detailsEach2 borderLine">实付款<text class="orange">￥{{cardInfo.order.pay_amount}}</text></view>
				<view class="detailsEach">订单编号<text>{{cardInfo.order.id}}</text></view>
				<view class="detailsEach">下单时间<text>{{getdate(cardInfo.order.created_at,1)}}</text></view>
				<!-- <view class="detailsEach">电子发票<text>请联系客服索取发票</text></view> -->
			</view>
			<!-- 未核销未退卡未转线上 -->
			<view class="useRule" v-if="cardInfo.ispickup==null && cardInfo.refund==null && cardInfo.online!=1">
				<view class="cardHandle">
					<view class="button" @tap="okTurnLine(cardInfo.order_id)">线上发货</view>
					<view class="button" @tap="refundCard(cardInfo.id)" v-if="cardInfo.given==null">我要退卡</view>
				</view>
			</view>	
			<!-- 已核销 -->
			<view class="useRule" v-if="cardInfo.ispickup==1">
				<view class="cardHandle">
					<view class="button" @tap="evaluateGo(cardInfo.order_id)">立即评价</view>
				</view>
			</view>		
		</view>
		<!-- 确认转为线下提示 -->
		<u-modal v-model="okLineShow" content="转为线上发货后不可更改并且会收取相应的邮费，确定转为线上发货？" title="信息提示" @confirm="okLineGo" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				type:null,
				cardInfo:null,
				lat:0,
				lon:0,
				storeList:null,
				curmarkers:null,
				// 转线上
				okLineShow:false,
				orderId:null,
				cardId:null,
				covers: [{
					id:0,
					latitude: 30.547606,
					longitude: 104.065020,
					iconPath: 'https://lovebirdopen.com/static/img/grade/supremeV7.svg'
				}, {
					id:1,
					latitude: 30.569082,
					longitude: 104.063049,
					iconPath: 'https://lovebirdopen.com/static/img/grade/goldV1.svg'
				}],
				polylineVal:[{
					points:[{
						latitude: 30.547606,
						longitude: 104.065020,
					},{
						latitude: 30.569082,
						longitude: 104.063049,
					}],
					color:'#40A9FF',
					arrowLine: true,
					dottedLine: true,
					// arrowIconPath: "/static/images/2btn_loc/btn_loc3.png",
					width: 2
				}],
				takeGoodsAlert:{
					alertShow:false,
					alertType:'success',
					alertIconSHow:true,
					alertIcon:'checkmark-circle-fill',
					alertIconColor:'#FF5238',
					alertTit:'提货成功',
					alertContent:'您已成功提货五梁红专属酒卡（和道酒坊）的五粮液，500ml,1瓶'
				}
				
			}
		},
		onShow() {
			// if(this.cardId!=null){
				this.getCardInfo(this.cardId);
			// }
		},
		onLoad: function (option) {
			this.cardId = option.id;
			this.type = option.type;
			// this.getCardInfo(option.id);
			this.isGetLocation();
		},
		methods:{
			// 获取定位
			getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this=this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						_this.getLocationInfo();
					},
					fail(){    //1.2 拒绝授权
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			getLocationInfo(){  //2. 获取地理位置
				var _this=this;
				uni.getLocation({
					type: 'gcj02',
					success (res) {
						_this.lat = res.latitude;
						_this.lon = res.longitude;
						// _this.covers[0].latitude=_this.lat;
						// _this.covers[0].longitude=_this.lon;
						// _this.polylineVal[0].points[0].latitude=_this.lat;
						// _this.polylineVal[0].points[0].longitude=_this.lon;
						_this.getStore();
					}
				});
			},
			isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
				var _this=this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						}else{
							_this.getLocationInfo()
						}
					}
				});
			},
			getStore(){
				this.apiget('/shop/store-front/search-store',{lat:this.lat,lon:this.lon}).then(res =>{
					if(res.data.status == 200 ) {
						// this.covers[1].latitude=parseFloat(res.data.data.list[0].lat);
						// this.covers[1].longitude=parseFloat(res.data.data.list[0].lon);
						// this.polylineVal[0].points[1].latitude=parseFloat(res.data.data.list[0].lat);
						// this.polylineVal[0].points[1].longitude=parseFloat(res.data.data.list[0].lon);
						if(res.data.data.list.length>0){
							this.curmarkers = [{
								latitude: parseFloat(res.data.data.list[0].lat),
								longitude: parseFloat(res.data.data.list[0].lon),
								// title: '我是标题',//标题
								iconPath: 'https://lovebirdopen.com/static/img/loc.svg',//标记图片，不配置的话使用默认标记
								width:24,
								height:28
							}]
							this.storeList = res.data.data.list[0];
						}
					}
				})
			},
			getCardInfo(id){
				this.apiget('/mall/liquor-card/view',{id:id}).then(res =>{
					if(res.data.status == 200 ) {
						this.cardInfo = res.data.data;
					}
				})
			},
			tomap() {
				uni.openLocation({
					latitude: parseFloat(this.storeList.lat),
					longitude: parseFloat(this.storeList.lon),
					name:this.storeList.name,
					address:this.storeList.address,
					success: function () {
						console.log('success');
					}
				});
			},
			// 查看可取货门店
			pickupStoreGo(){
				uni.navigateTo({
					url: './pickupStore'
				});
			},
			// 退卡
			refundCard(id){
				uni.navigateTo({
					url: './refundCard?id='+id+'&type='+this.type
				});
			},
			// 转线上
			okTurnLine(orderId){
				this.orderId = orderId;
				this.okLineShow = true;
			},
			okLineGo(){
				uni.navigateTo({
					url: './turnLine?cardId='+this.cardId+'&orderId='+this.orderId
				});
			},
			// 评价
			evaluateGo(id){
				uni.navigateTo({
					url: '../order/orderEvaluation?id='+id
				});
			}
		}
	}
</script>

<style lang="scss">
	.orderDetails{
		padding: 26rpx 32rpx;
		margin-top: 16rpx;
		background-color: #fff;
		border-radius: 16rpx;
		
		.detailsEach{
			margin-bottom: 20rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #666666;
			
			text{
				float: right;
			}
		}
		.detailsEach2{
			font-size: 32rpx;
			line-height: 44rpx;
			color: #333333;
			font-weight: bold;
			
			text{
				float: right;
			}
		}
		.orange{
			color: #FF5238;
		}
		.borderLine{
			padding-bottom: 25rpx;
			margin-bottom: 16rpx;
			border-bottom: 2rpx solid #EEEFF3;
		}
	}
	.liquorCardInfo{
		min-height: 100%;
		padding: 16rpx 32rpx;
		background-color: #F8F8FA;
		
		// 提货成功与否提示
		.takeGoodsTips{
			position: fixed;
			top: 100rpx;
			left: 0;
			z-index: 9;
			width: 100%;
			padding: 0 32rpx;
			
			.tipsContBox{
				// min-height: 100rpx;
				padding: 24rpx 32rpx;
				display: flex;
				background-color: #fff;
				box-shadow: 0px 16rpx 32rpx 16rpx rgba(0, 0, 0, 0.06);
				border-radius: 16rpx;
				
				.tipsCont{
					flex: auto;
					margin-left: 32rpx;
					
					.tipsContTit{
						font-size: 32rpx;
						line-height: 48rpx;
						color: #333;
					}
					.tipsContInfo{
						font-size: 24rpx;
						line-height: 40rpx;
						color: #666;
					}
				}
			}
		}
		// 上
		.cardInfoTop{
			position: relative;
			padding: 24rpx 24rpx 0;
			background-color: #fff;
			border-radius: 16rpx;
			
			.b-l-b{
				position: absolute;
				bottom: -14rpx;
				left: -14rpx;
				width: 28rpx;
				height: 28rpx;
				background-color: #F8F8FA;
				border-radius: 50%;
			}
			.b-r-b{
				position: absolute;
				bottom: -14rpx;
				right: -14rpx;
				width: 28rpx;
				height: 28rpx;
				background-color: #F8F8FA;
				border-radius: 50%;
			}
			// 内容
			.cardTit{
				height: 48rpx;
				font-size: 32rpx;
				line-height: 48rpx;
				color: #333;
			}
			.cardCont{
				padding: 24rpx 0 0;
				display: flex;
				
				image {
					width:160rpx;
					height: 160rpx;
					margin-right: 16rpx;
					border-radius: 8rpx;
				}
				
				.cardInfo{
					flex: auto;
					line-height: 40rpx;
					
					.liquorTit{
						display: flex;
						font-size: 24rpx;
						color: #333;
						
						.liquorTitleft{
							flex: auto;
							width: 1px;
						}
					}
					
					.liquorSpecs{
						display: flex;
						font-size: 24rpx;
						color: #999;
						
						.liquorSpecs{
							flex: auto;
						}
					}
					
					.waresTj{
						display: flex;
						margin-top: 38rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						
						.waresIconBox{
							color: #999;
							
							image{
								display: inline-block;
								width: 24rpx;
								height: 24rpx;
								margin-right: 10rpx;
							}
						}
						.waresTjInfo{
							flex: auto;
							width: 1px;
							margin-left: 16rpx;
							text-align: right;
							color: #333;
						}
						.waresTjUnit{
							color: #333;
						}
					}
				}
			}

		}
		
		// 下
		.carrdInfoBottom{
			position: relative;
			padding: 48rpx 24rpx 48rpx;
			background-color: #fff;
			border-radius: 16rpx;
			
			.b-l-t{
				position: absolute;
				top: -14rpx;
				left: -14rpx;
				width: 28rpx;
				height: 28rpx;
				background-color: #F8F8FA;
				border-radius: 50%;
			}
			.b-r-t{
				position: absolute;
				top: -14rpx;
				right: -14rpx;
				width: 28rpx;
				height: 28rpx;
				background-color: #F8F8FA;
				border-radius: 50%;
			}
			
			// 内容
			.pickupCode{
				position: relative;
				text-align: center;
				width: 296rpx;
				// height: 296rpx;
				margin: 0 auto;
				
				img{
					display: inline-block;
					width: 296rpx;
					height: 296rpx;
				}
				
				image{
					display: inline-block;
					width: 296rpx;
					height: 296rpx;
				}
				
				.pickupNum{
					margin-top: 15rpx;
					font-size: 28rpx;
					color: #666;
					line-height: 44rpx;
				}
				
				.pickedUpMask{
					position: absolute;
					top: 0;
					left: 50%;
					margin-left: -148rpx;
					width: 296rpx;
					height: 296rpx;
					background-color: rgba(255,255,255,.95);
					
				}
				.pickedUp{
					position: absolute;
					top: -18rpx;
					right: -38rpx;
					width: 138rpx;
					height: 138rpx;
				}
			}
			
		}
		// 使用规则
		.useRule{
			padding: 24rpx 32rpx;
			margin-top: 16rpx;
			background-color: #fff;
			border-radius: 16rpx;
			
			.useRuleTit{
				margin-bottom: 30rpx;
				font-size: 32rpx;
				line-height: 48rpx;
				color: #333;
			}
			.ruleInfo{
				position: relative;
				padding-left: 30rpx;
				font-size: 24rpx;
				line-height: 48rpx;
				color: #333;
			}
			.ruleInfo:after{
				position: absolute;
				content: '';
				top: 50%;
				left: 14rpx;
				width: 4rpx;
				height: 4rpx;
				margin-top: -2rpx;
				background-color: #333;
			}
		}
		
		
		.seeDesirable{
			padding: 22rpx 24rpx;
			display: flex;
			align-items: center;
			
			.left{
				flex: auto;
				
				.tit{
					font-size: 28rpx;
					line-height: 44rpx;
					color: #333;
					
					text{
						display: inline-block;
						padding: 0 16rpx;
						margin-left: 8rpx;
						font-size: 24rpx;
						line-height: 40rpx;
						color: #FF5238;
						background: rgba(255, 82, 56, 0.12);
						border-radius: 40rpx;
					}
				}
				
				.tips{
					font-size: 24rpx;
					line-height: 40rpx;
					color: #999;
				}
			}

		}
		
		.mapBox{
			height: 236rpx;
			background-color: #F8F8FA;
		}
			
		.distance{
			height: 68rpx;
			padding: 0 24rpx;
			font-size: 24rpx;
			line-height: 68rpx;
			background-color: #F8F8FA;
			color: #333;
		}
		
		.cardHandle{
			text-align: center;
			font-size: 0;
			
			.button{
				display: inline-block;
				width: 144rpx;
				height: 60rpx;
				margin: 0 8rpx;
				font-size: 22rpx;
				line-height: 60rpx;
				color: #999;
				border: 1rpx solid #E8E8E8;
				box-sizing: border-box;
				border-radius: 56rpx;
				background-color: #fff;
			}
		}
		
		.orderStatesBox{
			position: relative;
			display: flex;
			align-items: center;
		}
		.orderStates{
			flex: auto;
			padding: 20rpx 32rpx;
			font-size: 32rpx;
			line-height: 48rpx;
			color: #fff;
			
			.orderStatesTips{
				font-size: 24rpx;
				line-height: 40rpx;
			}
		}
	}
</style>
